import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input, Flex, Card } from "antd";
import type { AppDispatch } from "@/store";
import { login, setRemember, setPassword, setUserName } from "@/store/slice/auth";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import loginLeft from "@/assets/images/login_left.png";
import "./index.scss";
import { useEffect } from "react";
import { useState } from "react";

const Login: React.FC = () => {
  interface Account {
    password: string;
    userName: string;
  }
  interface UserState {
    password?: string
    userName?: string
  }
  const imgStyle: React.CSSProperties = {
    display: "block",
    width: 60,
  };
  const logo = import.meta.env.VITE_APP_LOGO

  const { loading, remember, password, userName } = useSelector((state: any) => state.authSlice);

  const navigate = useNavigate()

  const dispatch = useDispatch<AppDispatch>();
  const onChange = (e: any) => {
    dispatch(setRemember(e.target.checked))
  };
  const [userInfo, setUserInfo] = useState<UserState>({})
  const onFinish = (values: any) => {
    setUserInfo(values)
    dispatch(login(values))
  };
  useEffect(() => {
    if (loading == 'succeeded') {
      if (remember) {
        dispatch(setUserName(userInfo.userName))
        dispatch(setPassword(userInfo.password))
      }
      navigate('/', { replace: true })
    }
  }, [loading, navigate])
  return (
    <>
      <div className="login">
        <div className="login-card">
          <div className="login-left">
            <img src={loginLeft} alt="login" />
          </div>
          <Card className="card">
            <Flex justify="space-between" align="center" gap={10}>
              <img
                src={logo}
                alt="logo"
                style={imgStyle}
              />
              <div className="logon-title">欢迎使用夏目管理系统</div>
            </Flex>
            <Form
              name="login"
              initialValues={{
                remember: remember, password: password, userName: userName
              }}
              style={{ maxWidth: 360, marginTop: 40 }}
              onFinish={onFinish}
            >
              <Form.Item<Account>
                name="userName"
                rules={[{ required: true, message: "请输入用户名!" }]}
              >
                <Input
                  prefix={<UserOutlined />}
                  placeholder="Username"
                  size="large"
                  autoComplete="off"
                />
              </Form.Item>
              <Form.Item<Account>
                name="password"
                rules={[{ required: true, message: "请输入密码!" }]}
              >
                <Input
                  prefix={<LockOutlined />}
                  type="password"
                  placeholder="Password"
                  size="large"
                  autoComplete="off"
                />
              </Form.Item>
              <Form.Item>
                <Flex justify="space-between" align="center">
                  <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox onChange={onChange}>记住我</Checkbox>
                  </Form.Item>
                </Flex>
              </Form.Item>

              <Form.Item>
                <Button block type="primary" htmlType="submit" loading={loading == 'loading'}>
                  登录
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </div>
      </div>
    </>
  );
};
export default Login;
